<template>
    <div>
        <div class="goods">
            <li class="goods-li" v-for="item in goodslist" :key="item.id" @click="getGood(item.id)">
                <img :src="item.img_url" alt="">
                <h3>{{ item.title }}</h3>
                <div>
                    <p>
                        <span>¥{{ item.sell_price }}</span><span>¥{{ item.market_price}}</span>
                    </p>
                     <p>
                        <span>热卖中</span><span>剩余{{ item.stock_quantity }}件</span>
                     </p>
                </div>
            </li>
           <mt-button class="mint-button mint-button--danger mint-button--large" @click="getGoodsMore">加载更多</mt-button>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
    export default {
        data: function(){
            return {
                pageindex: 1,
                goodslist: []
            }
        },
        created: function(){
            this.getgoods()
        },
        methods: {
            getgoods: function(){
                this.$http.get('http://127.0.0.1:4000/api/getgoods?pageindex='+this.pageindex).then(res => {
                    // console.log(res.body)
                    if(res.body.message != 'ok'||res.body.success != true){
                        return Toast('获取数据失败')
                    }
                    this.goodslist= this.goodslist.concat(res.body.goods)
                    // console.log(this.goodslist)
                })
            },
            getGoodsMore: function(){
                this.pageindex++
                this.getgoods()
            },
            getGood: function(id){
                this.$router.push({ name: 'goodsinfo', params: {id: id}})
            }
        }
    }

</script>

<style lang="scss" scoped>
.goods {
    display: flex;
    flex-wrap:wrap;  
    justify-content:space-between;
    padding: 5px;
    
    li {
        width: 49%;
        min-height: 293px;
        border: 1px solid #ccc;
        margin-bottom: 5px;
        list-style: none;
        box-shadow: 0px 0px 5px #888888;
        position: relative;
        img {
            width: 100%;
          
        }
        h3 {
            font-size: 16px;
            font-weight: 600;
             margin: 0;
        }
        div {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: #eee;
            padding: 8px 5px;
            p:first-child{
                 margin: 0;
                span:first-child{
                    color:red;
                    font-size: 16px;
                }
                span:last-child{
                    margin-left: 15px;
                    font-size: 12px;
                    color: #888;
                    text-decoration: line-through;
                }
            }
            p:last-child {
                margin: 0;
                display: flex;
                justify-content: space-between;
            }
        }
    }
}
    
</style>